<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>添加学生</title>
    <style>
        /* 设置背景图片 */
        body {
            margin: 0;
            padding: 0;
            background-image: url('img/sky.jpg'); /* 替换为你的图片路径 */
            background-attachment: fixed; /* 使背景图片固定 */
            background-position: center; /* 图片居中 */
            background-repeat: no-repeat; /* 不重复图片 */
            background-size: cover; /* 图片覆盖整个背景 */
        }
        /* 设置表格样式 */
        table {
            width: 80%;
            margin: 50px auto;
            background-color: rgba(255, 255, 255, 0.8); /* 表格背景颜色，半透明 */
            border-collapse: collapse;
        }
        th, td {
            padding: 15px;
            text-align: left;
            border: 1px solid #ddd;
        }
    </style>
    <script>
        // 检查学号是否重复
        function checkStudentId() {
            const studentId = document.querySelector('input[name="studentId"]').value;

            // 发送 AJAX 请求到服务器检查学号
            fetch('students?action=checkStudentId&studentId=' + studentId)
                .then(response => response.json())
                .then(data => {
                    if (data.exists) {
                        alert('学号已存在，请重新输入！');
                        document.querySelector('input[name="studentId"]').value = ''; // 清空输入框
                    }
                })
                .catch(error => console.error('Error:', error));
        }

        // 表单提交前的验证
        function validateForm() {
            const studentId = document.querySelector('input[name="studentId"]').value;

            // 发送 AJAX 请求到服务器检查学号
            return fetch('students?action=checkStudentId&studentId=' + studentId)
                .then(response => response.json())
                .then(data => {
                    if (data.exists) {
                        alert('学号已存在，请重新输入！');
                        return false; // 阻止表单提交
                    }
                    return true; // 允许表单提交
                })
                .catch(error => {
                    console.error('Error:', error);
                    return false; // 阻止表单提交
                });
        }
    </script>
</head>
<body>
<h2 align="center">新增一条学生记录</h2>
<form action="students?action=insert" method="post" onsubmit="return validateForm()">
    <table>
        <tr>
            <th><b>学号:</b></th>
            <td>
                <input type="text" name="studentId" onblur="checkStudentId()" required>
            </td>
        </tr>
        <tr>
            <th><b>姓名:</b></th>
            <td><input type="text" name="studentName"></td>
        </tr>
        <tr>
            <th><b>密码:</b></th>
            <td><input type="password" name="studentPwd"></td>
        </tr>
        <tr>
            <th><b>性别:</b></th>
            <td>
                <input type="radio" name="sex" value="男" checked> 男
                <input type="radio" name="sex" value="女"> 女
            </td>
        </tr>
        <tr>
            <th><b>班级:</b></th>
            <td>
                <select name="classId">
                    <c:forEach items="${classList}" var="clazz">
                        <option value="${clazz.classId}">${clazz.className}</option>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr>
            <th></th>
            <td><input type="submit" value="提交"></td>
        </tr>
    </table>
</form>
</body>
</html>